<template>
    <BasicDrawer @register="register" 
      :title="title" 
      :showFooter="showFooter" 
      :width="width"
      :destroyOnClose="destroyOnClose"
      @close = "close"
      @ok="ok"
      @visible-change="visiblechange"
      >
      <slot></slot>
      <template #footer>
            <slot name="drawerFooter"></slot>
      </template>
    </BasicDrawer>
  </template>
<script lang="ts" setup>
import { ref,unref,withDefaults,toRefs } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';

const emits = defineEmits(["close","ok","register",'visiblechange']);
const props = withDefaults(defineProps<{
    title:string,
    width?:string,
    showFooter?:boolean,
    destroyOnClose?:boolean
}>(), {
    width : '33%',
    showFooter:true,//默认展示footer
    destroyOnClose:false,//默认展示footer
})

const { width } = props;
const { title } = toRefs(props);
const [register, { closeDrawer }] = useDrawerInner((data:any) => {});

const ok = ()=>{
    emits("ok");
}
const close = ()=>{
    emits("close");
}
  
const visiblechange=(visible:boolean)=>{
  emits('visiblechange',visible)
}
  
  </script>
  